<!DOCTYPE html>
<!-- saved from url=(0033)http://output.jsbin.com/boyuzo/1/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2017 by marvin1023 (http://jsbin.com/boyuzo/1/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
  <title>等比缩放</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">

<style id="jsbin-css">
*{
  box-sizing: border-box;
}
.wrap{
  overflow:hidden;
  background-color: #efefef;
}
.left,.right{
  float: left;
  width: 50%;
  padding: 10px;
}
.left{
  padding-right: 5px;
}
.right{
  padding-left: 5px;
}
.inner{
  padding-top: 100%;
  position:relative;  
}
img{
  width: 100%;
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.right-top{
  height:67%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.right-bottom{
  height:33%;
  position: absolute;
  top: 67%;
  width: 100%;
  padding-top: 10px;
}
.bottom-inner{
  height:100%;
  position:relative;
}
</style>
</head>
<body>
<div class="wrap">
  <div class="left">
    <div class="inner">
      <img src="./等比缩放_files/200" alt="">
    </div>
    
  </div>
  <div class="right">
    <div class="inner">
      <div class="right-top"><img src="./等比缩放_files/200x140" alt=""></div>
      <div class="right-bottom">
        <div class="bottom-inner">
          <img src="./等比缩放_files/200x50" alt="">
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" async="" src="./等比缩放_files/linkid.js"></script><script async="" src="./等比缩放_files/analytics.js"></script><script src="./等比缩放_files/edit.js"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"http://static.jsbin.com","root":"http://jsbin.com"});</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-1656750-34', 'auto');
ga('require', 'linkid', 'linkid.js');
ga('require', 'displayfeatures');
ga('send', 'pageview');

</script>


</body><a id="edit-with-js-bin" href="http://jsbin.com/boyuzo/1/edit" style="top: 0px;">Edit in JS Bin <img src="./等比缩放_files/favicon.png" width="16" height="16"></a><link rel="stylesheet" href="./等比缩放_files/edit.css"></html>